<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>EDU博客首页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" th:href="@{/blog/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/blog/css/nprogress.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/blog/css/style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/blog/css/font-awesome.min.css}">
    <link rel="apple-touch-icon-precomposed" th:href="@{/blog/images/icon.png}">
    <link rel="shortcut icon" th:href="@{/blog/images/favicon.ico}">
    <script th:src="@{/blog/js/jquery-2.1.4.min.js}"></script>
    <script th:src="@{/blog/js/nprogress.js}"></script>
    <script th:src="@{/blog/js/jquery.lazyload.min.js}"></script>
</head>

<body class="user-select">
<header class="header">
    <nav class="navbar navbar-default" id="navbar">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar"
                    aria-expanded="false">
                <span class="sr-only"></span> <span class="icon-bar"></span>
                <span class="icon-bar"></span> <span class="icon-bar"></span>
            </button>
        </div>
        <div class="container">
            <div class="collapse navbar-collapse" id="header-navbar">
                <form class="navbar-form visible-xs" th:action="@{/Search}" method="post">
                    <div class="input-group">
                        <input type="text" name="articletitle" class="form-control" placeholder="请输入关键字"
                               maxlength="20" autocomplete="off">
                        <span class="input-group-btn">
								<button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
							</span>
                    </div>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a th:href="@{/listBlog}">博客首页</a>
                    </li>
                    <li>
                        <a th:href="@{/createBlog}">我要写作</a>
                    </li>
                    <li>
                        <a th:href="@{/listBlog}">我的信息</a>
                    </li>
                    <li>
                        <a th:href="@{/listBlog}">返回导航页</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<section class="container">
    <div class="content-wrap">
        <div class="content">
            <!--轮播图插件-->
            <div id="focusslide" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#focusslide" data-slide-to="0" class="active"></li>
                    <li data-target="#focusslide" data-slide-to="1"></li>
                </ol>
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <a th:href="@{/#}" target="_blank" title="木庄网络博客源码">
                            <img th:src="@{/blog/images/201610181557196870.jpg}" alt="木庄网络博客源码" class="img-responsive"></a>
                    </div>
                    <div class="item">
                        <a th:href="@{/#}" target="_blank" title="专业网站建设">
                            <img th:src="@{/blog/images/201610241227558789.jpg}" alt="专业网站建设"
                                 class="img-responsive"></a>
                    </div>
                </div>
                <a class="left carousel-control" href="#focusslide" role="button" data-slide="prev" rel="nofollow">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">上一个</span>
                </a>
                <a class="right carousel-control" href="#focusslide" role="button" data-slide="next" rel="nofollow">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">下一个</span>
                </a>
            </div>
            <article class="excerpt-minic excerpt-minic-index">
                <h2><span class="red">【精品课程】</span>
                    <a target="_blank" th:href="@{/#}">Java</a>
                </h2>
                <p class="note">用DTcms做一个独立博客网站（响应式模板），采用DTcms V4.0正式版（MSSQL）。开发环境：SQL2008R2+VS2010。DTcms
                    V4.0正式版功能修复和优化：1、favicon.ico图标后台上传。（解决要换图标时要连FTP或者开服务器的麻烦）</p>
            </article>
            <div class="title">
                <h3>博客列表</h3>
                <div class="more">
                    <a href="#" th:href="@{/listBlog}">按时间排行</a>
                    <a href="#" th:href="@{/listBlogByLike}">按热度排行</a>
                    <a href="#" th:href="@{/listBlogByComment}">按评论量排行</a>
                </div>
            </div>
            <tr th:each="article:${articles}">
                <article class="excerpt excerpt-4" style="">
                    <a class="focus" th:href="@{/showBlog(id=${article.id})}" target="_blank">
                        <img class="thumb" data-original="images/201610181739277776.jpg"
                             th:src="@{'/images/'+${article.titlephoto}}" style="display: inline;"></a>
                    <header>
                        <a class="cat" th:href="@{/#}">IT相关<i></i></a>
                        <h2><a th:href="@{/showBlog(id=${article.id})}" target="_blank"
                               th:text="${article.articletitle}">用DTcms做一个独立博客网站（响应式模板）</a>
                        </h2>
                    </header>
                    <p class="meta">
                        <i class="glyphicon glyphicon-time"></i>
                        <time class="time" th:text="${#dates.format(article.articletime,'yyyy-MM-dd HH:mm;ss')}"
                              title="发布时间"> 2016-10-14
                        </time>
                        <i class="glyphicon glyphicon-heart-empty"></i><span class="views"
                                                                             th:text="${article.likecount}" title="点赞数"> 216</span>
                        <i class="glyphicon glyphicon-comment"></i>
                        <a class="comment" target="_blank" th:text="${article.commentscount}" title="评论">4</a>
                    </p>
                    <p class="note" th:text="${article.brief}">用DTcms做一个独立博客网站（响应式模板），采用DTcms
                        V4.0正式版（MSSQL）。开发环境：SQL2008R2+VS2010。DTcms
                        V4.0正式版功能修复和优化：1、favicon.ico图标后台上传。（解决要换图标时要连FTP或者开服务器的麻烦）</p>
                </article>
            </tr>
            <nav class="pagination" style="display: none;">
                <ul>
                    <li class="prev-page"></li>
                    <li class="active"><span>1</span></li>
                    <li class="next-page">
                        <a th:href="${currentPage}" }>下一页</a>
                    </li>
                    <li><span>共 2 页</span></li>
                </ul>
            </nav>
        </div>
    </div>
    <aside class="sidebar">
        <div class="fixed">
            <div class="widget widget-tabs">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#notice" aria-controls="notice" role="tab" data-toggle="tab">统计信息</a>
                    </li>
                    <li role="presentation">
                        <a href="#contact" aria-controls="contact" role="tab" data-toggle="tab">联系我们</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane contact active" id="notice">
                        <h2>博客总数:
                            888篇
                        </h2>
                        <h2>网站运行:
                            <span id="sitetime">88天 </span></h2>
                    </div>
                    <div role="tabpanel" class="tab-pane contact" id="contact">
                        <h2>QQ:382643892748923
                            <a href="" target="_blank" rel="nofollow" data-toggle="tooltip" data-placement="bottom"
                               title="" data-original-title="QQ:"></a>
                        </h2>
                        <h2>Email:23423432423
                            <a href="#" target="_blank" data-toggle="tooltip" rel="nofollow" data-placement="bottom"
                               title="" data-original-title="#"></a></h2>
                    </div>
                </div>
            </div>
            <div class="widget widget_search">
                <form class="navbar-form" th:action="@{/Search}" method="post">
                    <div class="input-group">
                        <input type="text" name="articletitle" class="form-control" size="35" placeholder="请输入关键字"
                               maxlength="15" autocomplete="off">
                        <span class="input-group-btn">
		                            <button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
	                        	</span></div>
                </form>
            </div>
        </div>
        <div class="widget widget_hot">
            <h3>最新评论文章</h3>
            <ul>
                <li>
                    <a title="用DTcms做一个独立博客网站（响应式模板）" th:href="@{/#}"><span class="thumbnail">
				<img class="thumb" data-original="images/201610181739277776.jpg"
                     th:src="@{/blog/images/201610181739277776.jpg}" alt="用DTcms做一个独立博客网站（响应式模板）"
                     style="display: block;">
			</span><span class="text">用DTcms做一个独立博客网站（响应式模板）</span><span class="muted"><i
                            class="glyphicon glyphicon-time"></i>
				2016-11-01
			</span><span class="muted"><i class="glyphicon glyphicon-eye-open"></i>88</span></a>
                </li>
            </ul>
        </div>
        <div class="widget widget_sentence">
            <a href="#" target="_blank" rel="nofollow">
                <img style="width: 100%" th:src="@{/blog/images//201610241224221511.jpg}" alt="专业网站建设"></a>
        </div>
        <div class="widget widget_sentence">
            <a th:href="@{/#}" target="_blank" rel="nofollow">
                <img style="width: 100%" th:src="@{/blog/images/ad.jpg}" alt="MZ-NetBlog主题"></a>
        </div>
    </aside>
</section>
<footer class="footer">
    <div id="gotop">
        <a class="gotop"></a>
    </div>
</footer>
<script th:src="@{/blog/js/bootstrap.min.js}"></script>
<script th:src="@{/blog/js/jquery.ias.js}"></script>
<script th:src="@{/blog/js/scripts.js}"></script>
<script type="text/javascript">
    layui.use('upload', function () {
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#film-pic' //绑定元素
            , url: contextPath + '/a/upload/editor' //上传接口
            , done: function (res) {
                //上传完毕回调
                //将图片路径放到film实体的图片路径属性中
                console.log(res.data);
                $("#filmpic").val(res.data[1]);
                //将图片路径放到img标签中
                $("#queue_img").css("display", "block");
                $("#queue_img").attr("src", contextPath + "/article/" + res.data[1]);
            }
            , error: function (res) {
                //请求异常回调
                layer.msg(res.data);
            }
        });
    });

</script>
<!--异步保存-->
<script type="text/javascript">
    function saveFilm() {
        var data = $("#film-form").serialize();
        $.ajax({
            type: "post",
            url: contextPath + "/a/film/save",
            data: data,
            success: function (jsonData) {
                layer.msg('保存成功', {icon: 1}, function () {
                    location.href = contextPath + "/a/film/list"
                });
            }
        })
    }
</script>
</body>

</html>